<!--
  * 岗位 表格 弹窗 选择框 
-->
<template>
  <a-modal v-model:visible="visible" :width="900" title="选择岗位" @cancel="closeModal" @ok="onSelectEmployee">
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row">
        <a-form-item label="岗位名称" class="smart-query-form-item">
          <a-input style="width: 250px" v-model:value="params.name" placeholder="岗位名称" />
        </a-form-item>
        <a-form-item label="是否有效" class="smart-query-form-item">
          <a-switch v-model:checked="params.state" checked-children="是" checkedValue="Y"  un-checked-children="否" unCheckedValue="N" />
        </a-form-item>
        <a-form-item class="smart-query-form-item smart-margin-left10">
          <a-button type="primary" @click="queryEmployee">
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button @click="reset" class="smart-margin-left10">
            <template #icon>
              <ReloadOutlined />
            </template>
            重置
          </a-button>
        </a-form-item>
      </a-row>
    </a-form>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
      :loading="tableLoading"
      size="small"
      :columns="columns"
      :data-source="tableData"
      :pagination="false"
      bordered
      rowKey="id"
      :scroll="{ y: 300 }"
    >
      <template #bodyCell="{ text, column }">
        <template v-if="column.dataIndex === 'state'">
          <span>{{ $smartEnumPlugin.getDescByValue('FLAG_ENUM', text) }}</span>
        </template>
      </template>
    </a-table>
    <div class="smart-query-table-page">
      <a-pagination
        showSizeChanger
        showQuickJumper
        show-less-items
        :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="params.pageSize"
        v-model:current="params.pageIndex"
        v-model:pageSize="params.pageSize"
        :total="total"
        @change="queryEmployee"
        @showSizeChange="queryEmployee"
        :show-total="(total) => `共${total}条`"
      />
    </div>
  </a-modal>
</template>
<script setup lang="ts">
  import { message } from 'ant-design-vue';
  import { computed, reactive, ref } from 'vue';
  import { dsApi } from '/@/api/system/auth/ds-api'
  import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import { smartSentry } from '/@/lib/smart-sentry';

  // ----------------------- 以下是字段定义 emits props ---------------------
  const emits = defineEmits('selectData');
  defineExpose({
    showModal,
  });

  // ----------------------- modal  显示与隐藏 ---------------------

  const visible = ref(false);
  async function showModal(selectroleId) {
    userId.value = selectroleId || undefined;
    visible.value = true;
    queryEmployee();
  }
  function closeModal() {
    Object.assign(params, defaultParams);
    visible.value = false;
  }
  // ----------------------- 员工查询表单与查询 ---------------------
  const tableLoading = ref(false);
  const total = ref();

  let defaultParams = {
    pageIndex: 1,
    pageSize: PAGE_SIZE,
    dsId: undefined,
    name: undefined,
    state: "Y",
    isRelate: false,
  };
  const params = reactive({ ...defaultParams });
  function reset() {
    Object.assign(params, defaultParams);
    queryEmployee();
  }
  async function queryEmployee() {
    tableLoading.value = true;
    try {
      params.dsId=userId;
      let res = await dsApi.queryRoleQuarter(params);
      tableData.value = res.data.data;
      total.value = res.data.total;
    } catch (error) {
      smartSentry.captureError(error);
    } finally {
      tableLoading.value = false;
    }
  }

  // ----------------------- 员工表格选择 ---------------------
  let userId = ref();
  let selectedRowKeyList=ref([]);
  const hasSelected = computed(() => selectedRowKeyList.value.length > 0);

  function onSelectChange(selectedRowKeys) {
    selectedRowKeyList.value = selectedRowKeys;
  }

  function onSelectEmployee() {
    if (!hasSelected.value) {
      message.warning('请选择岗位');
      return;
    }
    emits('selectData', selectedRowKeyList.value);
    closeModal();
  }

  // ----------------------- 员工表格渲染 ---------------------
  const tableData = ref([]);
  //字段
  const columns = [
  {
      title: '岗位名称',
      dataIndex: 'name',
    },
    {
      title: '是否有效',
      dataIndex: 'state',
    },
    {
      title: '排序号',
      dataIndex: 'showOrder',
    },
    {
      title: '描述',
      dataIndex: 'remark',
    },
  ];
</script>
